<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Keen - Responsive Bootstrap Admin & Dashboard Template</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta name="description" content="Keen - Responsive Bootstrap Admin & Dashboard Template"/>
	<link rel="canonical" href="https://keenthemes.com"/>
	<meta property="og:locale" content="en_US"/>
	<meta property="og:type" content="website"/>
	<meta property="og:title" content="Premium Bootstrap Admin Templates"/>
	<meta property="og:description" content="Keen - Responsive Bootstrap Admin & Dashboard Template"/>
	<meta property="og:url" content="https://keenthemes.com/"/>
	<meta property="og:site_name" content="Keenthemes"/>
	<meta property="article:publisher" content="https://www.facebook.com/keenthemes"/>
	<meta name="twitter:card" content="summary_large_image"/>
	<meta name="twitter:description" content="Keen - Responsive Bootstrap Admin & Dashboard Template"/>
	<meta name="twitter:title" content="Premium Bootstrap Admin Templates"/>
	<meta name="twitter:domain" content="Keenthemes"/>

	<link rel="shortcut icon" href="assets/favicon.ico"/>

	<link href="assets/plugins/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"><link href="assets/style/flaticon.css" rel="stylesheet" type="text/css"><link href="assets/plugins/line-awesome/css/line-awesome.min.css" rel="stylesheet" type="text/css"><link href="assets/plugins/socicon/css/socicon.css" rel="stylesheet" type="text/css"><link href="assets/plugins/tether/dist/css/tether.min.css" rel="stylesheet" type="text/css"><link href="assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet" type="text/css"><link href="assets/plugins/owl.carousel/dist/assets/owl.carousel.css" rel="stylesheet" type="text/css"><link href="assets/plugins/owl.carousel/dist/assets/owl.theme.default.css" rel="stylesheet" type="text/css"><link href="assets/style/style.css" rel="stylesheet" type="text/css"><link href="assets/plugins/highlight.js/styles/railscasts.css" rel="stylesheet" type="text/css">	<script src="assets/plugins/jquery/dist/jquery.min.js" type="application/javascript"></script><script src="assets/plugins/tether/dist/js/tether.min.js" type="application/javascript"></script><script src="assets/plugins/popper.js/dist/umd/popper.min.js" type="application/javascript"></script><script src="assets/plugins/bootstrap/dist/js/bootstrap.js" type="application/javascript"></script><script src="assets/plugins/perfect-scrollbar/dist/perfect-scrollbar.js" type="application/javascript"></script><script src="assets/plugins/owl.carousel/dist/owl.carousel.js" type="application/javascript"></script><script src="assets/js/custom.js" type="application/javascript"></script><script src="assets/plugins/highlight.js/lib/highlight.js" type="application/javascript"></script><script src="assets/plugins/highlight.js/build/highlight.pack.js" type="application/javascript"></script><script src="assets/js/docs.js" type="application/javascript"></script>
</head>
<body>
<div class="wrapper"><!-- wrapper -->

	<!-- section -->
<section class="section section--header">
    <header><!-- header -->
        <div class="content">
            <div class="header__handler">
                <div class="sidebar">
					<span class="hamburger">
						<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 129 129" enable-background="new 0 0 129 129" width="40px" height="40px">
							<g>
								<path d="m91.4,33.5h-53.8c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.8,4.1 4.1,4.1h53.9c2.3,0 4.1-1.8 4.1-4.1-0.1-2.3-1.9-4.1-4.2-4.1z" fill="#FFFFFF"/>
								<path d="m91.4,87.4h-53.8c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.8,4.1 4.1,4.1h53.9c2.3,0 4.1-1.8 4.1-4.1-0.1-2.3-1.9-4.1-4.2-4.1z" fill="#FFFFFF"/>
								<path d="m91.4,60.4h-53.8c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.8,4.1 4.1,4.1h53.9c2.3,0 4.1-1.8 4.1-4.1-0.1-2.3-1.9-4.1-4.2-4.1z" fill="#FFFFFF"/>
							</g>
						</svg>
					</span>
                    <div class="sidebar__menu_wrap">
                        <span class="sidebar__menu_close">x</span>
                        <ul class="sidebar__menu"><li class="sidebar__menu__item"><a href="index.html" target="" title="Preview"><span>Preview</span></a></li><li class="sidebar__menu__item active"><a href="docs.html" target="" title="Docs"><span>Docs</span></a></li><li class="sidebar__menu__item"><a href="video-tuts.html" target="" title="Video Tuts"><span>Video Tuts</span></a></li><li class="sidebar__menu__item"><a href="changelog.html" target="" title="Changelog"><span>Changelog</span></a></li><li class="sidebar__menu__item highlight"><a href="https://themes.getbootstrap.com/product/keen-the-ultimate-bootstrap-admin-theme/" target="_blank" title="Purchase"><span>Purchase</span></a></li></ul>                    </div>
                </div>
                <a href="https://keenthemes.com/keen" class="logo"><img src="assets/img/logo-keen.png" alt="Keen"></a>
            </div>
            <div class="header__references d-none d-md-block">
                <ul class="main__menu"><li class="main__menu__item"><a href="index.html" target="" title="Preview"><span>Preview</span></a></li><li class="main__menu__item active"><a href="docs.html" target="" title="Docs"><span>Docs</span></a></li><li class="main__menu__item"><a href="video-tuts.html" target="" title="Video Tuts"><span>Video Tuts</span></a></li><li class="main__menu__item"><a href="changelog.html" target="" title="Changelog"><span>Changelog</span></a></li><li class="main__menu__item highlight"><a href="https://themes.getbootstrap.com/product/keen-the-ultimate-bootstrap-admin-theme/" target="_blank" title="Purchase"><span>Purchase</span></a></li></ul>            </div>
        </div>
    </header><!-- header END -->

    <!-- content -->
<div class="content">
    <div class="sub-header">
        <h4 class="title"><span>Keen</span> - The Ultimate Multi-Demo Bootstrap Admin Theme</h4>
        <h4 class="sub-title">
        	The most complete UI/UX template solution for today's web projects of any size
        </h4>
    </div>
</div>
<!-- content END -->
</section>
<!-- section END -->

	<section class="section section--white section--padding"><!-- section -->
	<div id="docs" class="content">

		<div class="contents">
			<!-- contents -->

			<div class="doc-side-menu">
				<i class="la la-bars toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
				<div class="menu-list">
					<ul id="menu-content" class="menu-content collapse"><li class=""><a href="quick-start.html" >Quick Start</a></li><li class=""><a href="javascript:;" data-toggle="collapse" data-target="#a5c7a031976bdf" >Install<div class="arrow"></div></a><ul class="sub-menu collapse " id="a5c7a031976bdf"><li class=""><a href="classic-version.html">Classic Package</a></li><li class=""><a href="installation.html">Default Package</a></li></ul></li><li class=""><a href="demos.html" >Multi-Demo</a></li><li class=""><a href="files-structure.html" >Files Structure</a></li><li class=""><a href="build-tools.html" >Build Tools</a></li><li class=""><a href="javascript:;" data-toggle="collapse" data-target="#a5c7a031976bf2" >Stylesheets<div class="arrow"></div></a><ul class="sub-menu collapse " id="a5c7a031976bf2"><li class=""><a href="stylesheets.html">Overview</a></li><li class=""><a href="sass-global.html">Global</a></li><li class=""><a href="sass-demo.html">Demo</a></li></ul></li><li class=""><a href="javascript:;" data-toggle="collapse" data-target="#a5c7a031976bfc" >Javascripts<div class="arrow"></div></a><ul class="sub-menu collapse " id="a5c7a031976bfc"><li class=""><a href="javascripts.html">Overview</a></li><li class=""><a href="js-global.html">Global</a></li><li class=""><a href="js-demo.html">Demo</a></li></ul></li><li class="active"><a href="javascript:;" data-toggle="collapse" data-target="#a5c7a031976c0f" aria-expanded="true">Custom Plugins<div class="arrow"></div></a><ul class="sub-menu collapse show" id="a5c7a031976c0f"><li class=""><a href="datatable.html">Keen Datatable</a></li><li class=""><a href="menu.html">Keen Menu</a></li><li class=""><a href="header.html">Keen Header</a></li><li class=""><a href="offcanvas.html">Keen Offcanvas</a></li><li class=""><a href="portlet.html">Keen Portlet</a></li><li class=""><a href="scrolltop.html">Keen Scrolltop</a></li><li class=""><a href="toggle.html">Keen Toggle</a></li><li class="active"><a href="wizard.html">Keen Wizard</a></li></ul></li><li class=""><a href="rtl-version.html" >RTL Version</a></li><li class=""><a href="layout-builder.html" >Layout Builder</a></li><li class=""><a href="update.html" >Updates</a></li><li class=""><a href="backend-api.html" >Backend API</a></li><li class=""><a href="references.html" >References</a></li><li class=""><a href="security-notice.html" >Security Notice</a></li></ul>				</div>
			</div>

			<div class="contents__box contents__box--right">
				<!-- contents__box -->
				<div class="section">
	<h2 class="section-head">Keen Wizard</h2>

	<h3 id="sec23-1" class="section-title">Overview</h3>
	<div class="section-content">
		<p><code>KTWizard</code> is a Keen's custom plugin defined in <code>[root]/theme/default/src/theme/framework/components/base/wizard/wizard.js</code>.</p>
	</div>

	<div class="space"></div>

	<h3 id="sec23-2" class="section-title">Initialization</h3>
	<div class="section-content">
		<p>First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.</p>
		<pre><code>var wizard = new KTWizard('kt_wizard',options);</code></pre>
	</div>

	<div class="space"></div>

	<h3 id="sec23-3" class="section-title">Options</h3>
	<div class="section-content">
		<pre><code>var options = {
    startStep: 1,
    manualStepForward: false
};</code></pre>

		<div class="space"></div>

		<table class="table-list">
			<thead>
			<tr>
				<th class="force-border">Field</th>
				<th class="force-border">Type</th>
				<th class="force-border">Description</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td nowrap><code>startStep</code></td>
				<td nowrap><code>number</code></td>
				<td>
					<p>The page number of step to start at the initial load</p>
					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code>startStep: 1</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>manualStepForward</code></td>
				<td nowrap><code>boolean</code></td>
				<td>
					<p>Set enable/disable to manually step forward</p>
					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Sample</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code>manualStepForward: false</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			</tbody>
		</table>
	</div>


	<div class="space"></div>

	<h3 id="sec23-5" class="section-title">Attributes</h3>

	<pre><code>&lt;div class=&quot;kt-grid kt-grid--desktop-xl kt-grid--ver-desktop-xl kt-wizard-v1 kt-wizard-v1--extend&quot; id=&quot;k_wizard_v4&quot; data-ktwizard-state=&quot;step-first&quot;&gt;
	&lt;div class=&quot;kt-grid__item kt-wizard-v1__aside&quot;&gt;

		&lt;!--begin: Form Wizard Nav --&gt;
		&lt;div class=&quot;kt-wizard-v1__nav&quot;&gt;
			&lt;div class=&quot;kt-wizard-v1__nav-items&quot;&gt;
				&lt;a class=&quot;kt-wizard-v1__nav-item&quot; href=&quot;#&quot; data-ktwizard-type=&quot;step&quot; data-ktwizard-state=&quot;current&quot;&gt;
					&lt;span&gt;1&lt;/span&gt;
				&lt;/a&gt;
				&lt;a class=&quot;kt-wizard-v1__nav-item&quot; href=&quot;#&quot; data-ktwizard-type=&quot;step&quot;&gt;
					&lt;span&gt;2&lt;/span&gt;
				&lt;/a&gt;
				&lt;a class=&quot;kt-wizard-v1__nav-item&quot; href=&quot;#&quot; data-ktwizard-type=&quot;step&quot;&gt;
					&lt;span&gt;3&lt;/span&gt;
				&lt;/a&gt;
				&lt;a class=&quot;kt-wizard-v1__nav-item&quot; href=&quot;#&quot; data-ktwizard-type=&quot;step&quot;&gt;
					&lt;span&gt;4&lt;/span&gt;
				&lt;/a&gt;
			&lt;/div&gt;
			&lt;div class=&quot;kt-wizard-v1__nav-details&quot;&gt;
				&lt;div class=&quot;kt-wizard-v1__nav-item-wrapper&quot; data-ktwizard-type=&quot;step-info&quot; data-ktwizard-state=&quot;current&quot;&gt;
					&lt;!-- step content info here --&gt;
				&lt;/div&gt;
				&lt;div class=&quot;kt-wizard-v1__nav-item-wrapper&quot; data-ktwizard-type=&quot;step-info&quot;&gt;
					&lt;!-- step content info here --&gt;
				&lt;/div&gt;
				&lt;div class=&quot;kt-wizard-v1__nav-item-wrapper&quot; data-ktwizard-type=&quot;step-info&quot;&gt;
					&lt;!-- step content info here --&gt;
				&lt;/div&gt;
				&lt;div class=&quot;kt-wizard-v1__nav-item-wrapper&quot; data-ktwizard-type=&quot;step-info&quot;&gt;
					&lt;!-- step content info here --&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		&lt;!--end: Form Wizard Nav --&gt;

	&lt;/div&gt;
	&lt;div class=&quot;kt-grid__item kt-grid__item--fluid kt-wizard-v1__wrapper&quot;&gt;
		&lt;!--begin: Form Wizard Form--&gt;
		&lt;form class=&quot;kt-form&quot; id=&quot;k_form&quot;&gt;

			&lt;!--begin: Form Wizard Step 1--&gt;
			&lt;div class=&quot;kt-wizard-v1__content&quot; data-ktwizard-type=&quot;step-content&quot; data-ktwizard-state=&quot;current&quot;&gt;
				&lt;!-- content here --&gt;
			&lt;/div&gt;
			&lt;!--end: Form Wizard Step 1--&gt;

			&lt;!--begin: Form Wizard Step 2--&gt;
			&lt;div class=&quot;kt-wizard-v1__content&quot; data-ktwizard-type=&quot;step-content&quot;&gt;
				&lt;!-- content here --&gt;
			&lt;/div&gt;
			&lt;!--end: Form Wizard Step 2--&gt;

			&lt;!--begin: Form Wizard Step 3--&gt;
			&lt;div class=&quot;kt-wizard-v1__content&quot; data-ktwizard-type=&quot;step-content&quot;&gt;
				&lt;!-- content here --&gt;
			&lt;/div&gt;
			&lt;!--end: Form Wizard Step 3--&gt;

			&lt;!--begin: Form Wizard Step 4--&gt;
			&lt;div class=&quot;kt-wizard-v1__content&quot; data-ktwizard-type=&quot;step-content&quot;&gt;
				&lt;!-- content here --&gt;
			&lt;/div&gt;
			&lt;!--end: Form Wizard Step 4--&gt;

			&lt;!--begin: Form Actions --&gt;
			&lt;div class=&quot;kt-form__actions&quot;&gt;
				&lt;div class=&quot;btn btn-secondary btn-md btn-tall btn-wide kt-font-bold kt-font-transform-u&quot; data-ktwizard-type=&quot;action-prev&quot;&gt;
					&lt;span&gt;
						&lt;span&gt;Previous&lt;/span&gt;
					&lt;/span&gt;
				&lt;/div&gt;
				&lt;div class=&quot;btn btn-success btn-md btn-tall btn-wide kt-font-bold kt-font-transform-u&quot; data-ktwizard-type=&quot;action-submit&quot;&gt;
					&lt;span&gt;
						&lt;span&gt;Submit&lt;/span&gt;
					&lt;/span&gt;
				&lt;/div&gt;
				&lt;div class=&quot;btn btn-info btn-md btn-tall btn-wide kt-font-bold kt-font-transform-u&quot; data-ktwizard-type=&quot;action-next&quot;&gt;
					&lt;span&gt;
						&lt;span&gt;Next Step&lt;/span&gt;
					&lt;/span&gt;
				&lt;/div&gt;
			&lt;/div&gt;
			&lt;!--end: Form Actions --&gt;
		&lt;/form&gt;
		&lt;!--end: Form Wizard Form--&gt;
	&lt;/div&gt;
&lt;/div&gt;
</code></pre>

	<div class="space"></div>

	<div class="section-content">
		<table class="table-list">
			<thead>
			<tr>
				<th class="force-border">Atrribute</th>
				<th class="force-border">Description</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td nowrap style="vertical-align: top;"><code>data-ktwizard-state</code></td>
				<td>
					<p>Set the initial KTWizard initial state. The state value will be changed based on interaction to the wizard.</p>

					<div class="space"></div>
					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>current</code></td>
							<td><p>Current wizard step</p></td>
						</tr>
						<tr>
							<td nowrap><code>done</code></td>
							<td><p>All the previous wizard page step</p></td>
						</tr>
						<tr>
							<td nowrap><code>pending</code></td>
							<td><p>All the next wizard page step</p></td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap style="vertical-align: top;"><code>data-ktwizard-type</code></td>
				<td>
					<p></p>

					<div class="space"></div>
					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>step</code></td>
							<td><p>Define element as a step number button</p></td>
						</tr>
						<tr>
							<td nowrap><code>step-info</code></td>
							<td><p>Define element as a step info</p></td>
						</tr>
						<tr>
							<td nowrap><code>step-content</code></td>
							<td><p>Define element as a step content</p></td>
						</tr>
						<tr>
							<td nowrap><code>action-submit</code></td>
							<td><p>Define element as action submit button</p></td>
						</tr>
						<tr>
							<td nowrap><code>action-next</code></td>
							<td><p>Define element as action button to the next step</p></td>
						</tr>
						<tr>
							<td nowrap><code>action-prev</code></td>
							<td><p>Define element as action button to the previous step</p></td>
						</tr>
						<tr>
							<td nowrap><code>action-last</code></td>
							<td><p>Define element as action button to the last step</p></td>
						</tr>
						<tr>
							<td nowrap><code>action-first</code></td>
							<td><p>Define element as action button to the first step</p></td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			</tbody>
		</table>
	</div>

	<div class="space"></div>

	<h3 id="sec23-5" class="section-title">API Methods</h3>
	<div class="section-content">
		<table class="table-list">
			<thead>
			<tr>
				<th class="force-border">Method</th>
				<th class="force-border">Description</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td nowrap style="vertical-align: top;"><code>setDefaults(options)</code></td>
				<td>
					<p>Set default options</p>
					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>options</code></td>
							<td nowrap><code>object</code></td>
							<td><p>A new options object for the menu</p></td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap style="vertical-align: top;"><code>goNext()</code></td>
				<td>
					<p>Go to the next step</p>
				</td>
			</tr>
			<tr>
				<td nowrap style="vertical-align: top;"><code>goPrev()</code></td>
				<td>
					<p>Go to the previous step</p>
				</td>
			</tr>
			<tr>
				<td nowrap style="vertical-align: top;"><code>goLast()</code></td>
				<td>
					<p>Go to the last step</p>
				</td>
			</tr>
			<tr>
				<td nowrap style="vertical-align: top;"><code>stop()</code></td>
				<td>
					<p>Cancel step</p>
				</td>
			</tr>
			<tr>
				<td nowrap style="vertical-align: top;"><code>start()</code></td>
				<td>
					<p>Resume step</p>
				</td>
			</tr>
			<tr>
				<td nowrap style="vertical-align: top;"><code>goFirst()</code></td>
				<td>
					<p>Go to the first step</p>
				</td>
			</tr>
			<tr>
				<td nowrap style="vertical-align: top;"><code>goTo(number)</code></td>
				<td>
					<p>Jump the step page into the specified step number</p>
					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>number</code></td>
							<td nowrap><code>number</code></td>
							<td><p>Number of step to jump</p></td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap style="vertical-align: top;"><code>getStep()</code></td>
				<td>
					<p>Get current step page number</p>
				</td>
			</tr>
			<tr>
				<td nowrap style="vertical-align: top;"><code>isLastStep()</code></td>
				<td>
					<p>Check if the current step number is the last step</p>
				</td>
			</tr>
			<tr>
				<td nowrap style="vertical-align: top;"><code>isFirstStep()</code></td>
				<td>
					<p>Check if the current step number is the first step</p>
				</td>
			</tr>
			<tr>
				<td nowrap style="vertical-align: top;"><code>on(name, handler)</code></td>
				<td>
					<p>Register event</p>
					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>name</code></td>
							<td nowrap><code>string</code></td>
							<td><p>Unique event name</p></td>
						</tr>
						<tr>
							<td nowrap><code>handler</code></td>
							<td nowrap><code>function</code></td>
							<td><p>Callback function handler for the event</p></td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap style="vertical-align: top;"><code>one(name, handler)</code></td>
				<td>
					<p>Register event to be run once</p>
					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th colspan="3" class="force-border">Input Parameters</th>
						</tr>
						</thead>
						<thead>
						<tr>
							<th class="force-border">Name</th>
							<th class="force-border">Type</th>
							<th class="force-border">Description</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td nowrap><code>name</code></td>
							<td nowrap><code>string</code></td>
							<td><p>Unique event name</p></td>
						</tr>
						<tr>
							<td nowrap><code>handler</code></td>
							<td nowrap><code>function</code></td>
							<td><p>Callback function handler for the event</p></td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			</tbody>
		</table>
	</div>
</div>			</div>
			<!-- contents END -->

		</div>
	</div>
</section><!-- section END -->

	
	<!-- section -->
	<section class="section section--bg-features shadow-top-inset">
		<div class="content"><!-- content -->
			<div class="row intro-header">
				<div class="desc">
					<h3 class="title">Keen’s Key Features</h3>
					<p class="text">
						Keen empowers your project with virtually limitless array of options<br> 
						to create endless unique projects.
					</p>
					<ul class="listing">
						<li><span class="bullet"></span>Based On <strong>Bootstrap 4.x</strong></li>
						<li><span class="bullet"></span><strong>Multi-Demo</strong> Concept</li>
						<li><span class="bullet"></span><strong>Enterprise Ready</strong> Architect</li>
						<li><span class="bullet"></span>Integrated Build Tools: <strong>Gulp, NPM, Yarn, SASS</strong></li>
						<li><span class="bullet"></span><strong>Full RTL</strong> Support</li>
						<li><span class="bullet"></span>Included <strong>Classic(without build tool) Version</strong></li>
						<li><span class="bullet"></span><strong>Enterprise Ready</strong> Core Framework</li>
						<li><span class="bullet"></span><strong>Full SASS</strong> Support</li>
						<li><span class="bullet"></span>Re-Usable <strong>Component System</strong></li>
						<li><span class="bullet"></span>And many more...</li>
					</ul>
				</div>
			</div>
		</div><!-- content END -->
	</section>
	<!-- section END -->

	<!-- section -->
	<section class="section section--white shadow-top">
		<div class="content content--padding">
			<div class="x-owl-carousel owl-theme" data-items="1" data-loop="1" data-autoplay="1" data-margin="30" data-responsive-Class="true" data-smart-Speed="3000" data-autoplay-Timeout="6000" data-transition-Style="fade">
				<div class="item">
					<blockquote class="blockquote">
						We truly hope that our love and dedication to produce an incredibly powerful high level solution suits all your project needs. We will continue to deliver incredible enterprise ready solutions for Angular, React and VueJS to serve you better. We sincerely hope you enjoyed using Keen as much as we enjoyed building it.
						<p class="blockquote__author">Sean,<span>&nbsp;&nbsp;Keenthemes Co-Author</span></p>
					</blockquote>
				</div>
			</div>
		</div>
	</section>
	<!-- section END -->


	<footer class="section section--bg-footer">
    <img src="assets/img/logo-keenthemes.png" alt="" >
    <form action="//keenthemes.us3.list-manage.com/subscribe/post?u=b10f23244c11e2946463ea844&amp;id=6998d1f883" method="post" id="mc-embedded-subscribe-form"
          name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div class="subscribe">
            <input type="email" name="EMAIL" placeholder="Enter your email to subscribe newsletter">
            <button type="submit" class="button button-subscribe" name="subscribe">Submit</button>
        </div>
    </form>

    <div class="socials">
        <a href="http://twitter.com/keenthemes" target="_blank"><i class="socicon-twitter"></i></a>
        <a href="https://dribbble.com/keenthemes" target="_blank"><i class="socicon-dribbble"></i></a>
        <a href="https://themes.getbootstrap.com/product/keen-the-ultimate-bootstrap-admin-theme/" target="_blank"><img class="img-fluid" src="assets/img/icon-bootstrap.png"></a>
    </div>
</footer>

</div><!-- wrapper END -->

</body>
</html>
